.tms-chat {
    height: 100%;

    .ui.comments {
        min-height: e("calc(100% - 170px)");

        >.comment {
            >.content {
                display: block !important;
            }
        }
    }

    .tms-edit-textarea {
        width: 100%;
    }

    .ui.selection.list>.item {
        cursor: default;
    }

    .ui.search .prompt {
        border-radius: .28571429rem;
    }

    .tms-content {
        position: relative;
        margin-left: 220px;
        top: 60px;
        height: e("calc(100% - 60px)");

        // display: -webkit-box;
        // display: -ms-flexbox;
        // display: flex;
        // -webkit-box-align: stretch;
        // -ms-flex-align: stretch;
        // align-items: stretch;
        &.tms-sidebar-show {
            .tms-right-sidebar {
                width: 388px;
                border-left: 1px #e9e9e9 solid;
                -webkit-transition: width .15s ease-out 0s;
                transition: width .15s ease-out 0s;
                margin: 4px;
                margin-right: 0;
            }
        }

        @media only screen and (max-width: 767px) {
            margin-left: 0;
        }

        .tms-content-body {
            .tms-comments-container {
                width: 100%;
                height: 100%;
                overflow: auto;
            }

            width: 100%;
            height: 100%;
            max-width: 100%;
            // -webkit-box-flex: 1;
            // -ms-flex: 1 1 0px;
            // flex: 1 1 0;
            // display: -webkit-box;
            // display: -ms-flexbox;
            // display: flex;
            // -webkit-box-align: stretch;
            // -ms-flex-align: stretch;
            // align-items: stretch;
            padding-bottom: 73px;

            .ui.comments {
                overflow: hidden;
                // -webkit-box-flex: 1;
                // -ms-flex: 1 1 0px;
                // flex: 1 1 0;
                max-width: none;
                margin-bottom: 12px;
                margin-top: 10px;

                >.ui.basic.button {
                    display: block;
                    margin-right: 0;
                }

                .tms-pre-more {
                    margin-bottom: 10px;
                }

                .tms-next-more {
                    margin-top: 10px;
                    position: relative;

                    .ui.icon.button {
                        position: absolute;
                        top: 2px;
                        right: -1px;
                    }
                }
            }

            .tms-go {
                position: fixed;
                left: 240px;

                .ui.button {
                    margin: 0;
                    background-color: rgba(224, 225, 226, 0.5);

                    &:hover {
                        background-color: #CACBCD;
                    }
                }

                @media only screen and (max-width: 767px) {
                    left: 20px;
                }
            }

            .tms-go-head {
                top: 80px;
            }

            .tms-go-foot {
                bottom: 90px;
            }
        }
    }

    .tms-right-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        // height: 100%;
        bottom: 0;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 10px;

        .comments {
            .ui.button.tms-search-more {
                display: block;
                margin: 0;
            }

            .comment {
                .markdown-body {
                    max-height: 65px;
                    overflow-y: hidden;

                    &.tms-open {
                        max-height: none;
                        overflow-y: auto;
                        padding-bottom: 20px;
                    }
                }

                .tms-btn-open-search-item {
                    display: none;
                    height: 25px;
                    // background-color: rgba(0, 0, 0, 0.1);
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    text-align: center;
                    padding-top: 2px;
                    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, #bbbbbb 100%);
                    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, #bbbbbb 100%);
                    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0, #bbbbbb 100%);
                    background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0, #bbbbbb 100%);
                }

                &:hover {
                    .tms-btn-open-search-item {
                        display: block;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 767px) {
        .tms-content>.ui.dimmer {
            display: block;
            opacity: 1;
            z-index: 1;
        }

        &.hide-bar {
            .tms-content>.ui.dimmer {
                display: none;
            }
        }

        .tms-left-sidebar.hide-bar {
            left: -220px;
        }

        .tms-right-sidebar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 59px;
            background-color: white;
            margin-left: 0 !important;

            .panel-chat-msg {
                .ui.basic.segment.minimal.selection.list.segment.comments {
                    padding-left: 0;
                    padding-right: 0;
                }
            }
        }

        .tms-sidebar-show {
            .tms-right-sidebar {
                width: 100% !important;
            }
        }
    }

    .tms-edit-actions {
        .left.button {
            border-top-left-radius: 0;
        }

        .right.button {
            border-top-right-radius: 0;
        }
    }

    .tms-msg-filter {
        position: absolute;
        left: 14px;
        bottom: 72px;
        padding: 8px !important;
        margin-right: 0px;
        background-color: rgba(224, 225, 226, 0.5);

        .red.remove.icon {
            display: none;
            position: absolute;
            top: -6px;
            right: -6px;
        }

        &.filterd {
            .red.remove.icon {
                display: inline-block;
            }
        }
    }
}

.tms-chat-progress {
    position: absolute;
    display: inline-block;
    top: 60px;
    left: 0;
    width: 0;
    height: 2px;
    margin-left: 220px;
    background-color: #c6c6c6;
    box-shadow: 0px 0px 8px 0px #c6c6c6;

    @media only screen and (max-width: 767px) {
        margin-left: 0;
    }
}
